// webpack 配置文件
//  指示webpack干哪些活 （当运行webpack指令时，会加载里面的配置文件）
// 所有的构建工具都是基于node.js平台运行的 ，模块化默认采用commonjs

// resolve用来拼接绝对路径的方法
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  //入口文件
  entry: "./src/index.js",
  // 输出
  output: {
    // 输出文件名
    filename: "build.js",
    // 输出路径
    // __dirname 是node.js的变量，代表当前文件的目录的绝对路径
    path: resolve(__dirname, "build"), // 代表输出到当前目录下创建的build文件夹下
  },
  // loader的配置
  module: {
    rules: [
      // 详细的loader配置
      {
        test: /\.css$/, //匹配.css结尾的文件
        use: [
          // 使用哪些loader进行处理，use数组中的执行顺序是从后往前
          //创建一个style标签，将js中的样式资源插入进去，添加到head中生效
          "style-loader",
          // 将css文件编程commonjs模块加载在js中，里面内容是样式字符串
          "css-loader",
        ],
      },
      {
        test: /\.less$/, //匹配.less结尾的文件
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 这种方式无法处理html文件中的图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          // 图片大小小于8kb,会被解析为base64处理,优点减少请求数量减轻服务器压力，缺点是图片体积更大，文件请求速度更慢
          limit: 8 * 1024,
          esModule: false,
          // 这样可以修改图片名称，[hash:10]表示取hash值的前十位，[ext]表示原文件扩展名
          name: "img/[hash:8].[name].[ext]",
        },
      },
      {
        // 因为url-loader默认适用了es6模块解析，而html-loader 引入图片适用commonJS处理，解析时会出现[object Module],需要关闭url-loader的es6模块化解析
        test: /\.html$/,
        // 处理html 文件的img文件
        loader: "html-loader",
      },
      {
        // 打包其他资源（除了css,js,html,less,json资源以外的资源）
        exclude: /\.(css|js|html|less|json)$/,
        loader: "file-loader",
      },
    ],
  },
  //plugin的配置
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  // 模式
  mode: "development", // 开发模式
  // mode:"production"// 生产模式

  // devServe 开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包。不会有任何输出
  // 启动devServer 的指令为：npx webpack-dev-server(本地启动)
  devServer: {
    // contentBase: resolve(__dirname, "build"),// 这个配置在新版本的webpack中使用下面的方式配置，否则会报错
    static: { // static: ['assets']
      directory: resolve(__dirname, "build")
    },
    // 启用gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    open:true// 自动打开浏览器
  },
};
